<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn1,
        .submit {
            padding: 6px 10px;
            border: none;
            outline: none;
            background-color: #e15761;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        .submit {
            background-color: #f5dc3a;
            padding: 10px 16px;
        }
        ul {
            list-style: none;
        }
        .li {
            width: 600px;
            padding: 10px 5px;
            border-bottom: 1px dashed #666;
        }
        .model {
            display: none;
            /* vw: viewport width  vh: viewprot height 占有页面实际尺寸的百分比*/
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(200, 200, 200, 0.6);
        }
        .content {
            width: 600px;
            height: 300px;
            padding: 20px;
            border-radius: 8px;
            background-color: #fff;
            margin: 100px auto 0;
        }
        .user {
            color: #f5dc3a;
        }
        .time {
            margin-left: 20px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <button class="btn1" onclick="showModel()">我要发帖</button>
    <ul class="comment-ul">
        <li class="li">
            <div>我是胖虎，你不要为难我胖虎</div>
            <div class="user">胖虎<span class="time">2022-04-13 14:11:00</span></div>
        </li>
    </ul>
    <div class="model">
        <div class="content">
            <input type="text" placeholder="用户名" class="name">
            <br><br><br>
            <textarea class="comment" cols="30" rows="10"></textarea>
            <button class="submit" onclick="sent()">submit</button>
        </div>
    </div>
    <script>
        var model = document.querySelector('.model');
        var nameEl = document.querySelector('.name');
        var commentEl = document.querySelector('.comment');
        var ulEl = document.querySelector('.comment-ul');
        // 1. 点击按钮，显示弹窗
        function showModel () {
            model.style.display = 'block';
        }
        // 2. 点击按钮，获取数据并关闭弹窗
        function sent() {
            var nowTime = new Date();
            // 3. 追加评论，显示在页面中
            var liEl = document.createElement('li');
            liEl.className = 'li';
            liEl.innerHTML = '<div>'+ commentEl.value +'</div><div class=user>'+nameEl.value+
                '<span class=time>'+ nowTime.getFullYear() + '-' + Number(nowTime.getMonth()+1) +
                '-' + nowTime.getDate() + '</span></div>';
            // 添加到父元素内部的末尾
            ulEl.appendChild(liEl);
            // 清空输入框，方便下次使用
            nameEl.value = '';
            commentEl.value = '';
            model.style.display = 'none';
        }
    </script>
</body>
</html>